<template>
  <div class="person">
    <h2>年龄：{{ age }}</h2>
    <button @click="changeAge">修改年龄</button>
    <h2>有一辆{{ car.brand }}车，价值：{{ car.price }}</h2>
    <button @click="changeCarBrand">修改汽车品牌</button>
    <br></br>
    <el-button type="primary">i am button</el-button>
    <el-button type="danger">危险按钮</el-button>


  </div>
</template>

<script setup lang='ts' name="Person">
  import { getCategoryApi } from '@/apis/layout'
  import { ref, reactive, onMounted} from 'vue'
  let age = ref(18)
  let car = reactive({
    brand:'奥迪',
    price:'20'
  })


  const getCategoryList = async () => {
      const res = await getCategoryApi()
      console.log('test api:', res)
    }

  onMounted(() => getCategoryList())


  function changeAge() {
    age.value = age.value + 1
  }
  function changeCarBrand() {
    car.brand = '奔驰'
  }


</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>
